{% extends 'base.html' %}
{% load humanize %}
{% block page-content %}
{% include 'nav_cat_bar.html' %}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>批量脚本分发</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">未启用 1</a>
                            </li>
                            <li><a href="#">未启用 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <form id="ScriptForm" method="post" class="form-horizontal"   enctype="multipart/form-data" onsubmit="return check_script();">
                        <div class="form-group"><label class="col-sm-2 control-label"> 目标机器 <span class="red-fonts">*</span> </label>
                            <a type="button" class="btn btn-info" href="{% url 'exec_script_hosts' %}"><i class="fa fa-desktop"></i> 选择服务器</a>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label"> 已选择服务器 <span class="red-fonts">*</span> </label>
                            <div class="col-sm-8">
                                {% for k,v in host_info.items %}
                                    <input type="checkbox" value={{k}} name="host" checked="checked">{{v}}<br>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">上传本地脚本<span class="red-fonts">*</span> </label>
                            <div class="col-sm-8">
                                <input type="radio" value=".py" name="script_type" >.py
                                <input type="radio" value=".sh" name="script_type" >.sh
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label"> 1. 本地上传<span class="red-fonts">*</span> </label>
                            <div class="col-sm-8">
                              <div class="form-group has-info">
                                <input type="file" name="up_file" class="btn btn-mini btn-info" >
                                <span class="input-icon fui-check-inverted"></span>
                              </div>
                            </div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label"> 2. 选择脚本<span class="red-fonts">*</span> </label>
                            <div class="col-sm-5">
                                <select id="check_args" class="form-group form-control" name="script_name">
                                    <option value= >请选择</option>
                                        {% for num in script_obj %}
                                         <option value={{num.script_name}} >[{{ num.project }}]--{{num.use_name}}-->{{num.script_name}}</option>
                                        {% endfor %}
                                </select>
                           </div>
                       </div>
                       <div class="hr-line-dashed"></div>
                       <div class="form-group input-args">
                       </div>
{#                        <div class="hr-line-dashed"></div>#}
{#                        <div class="form-group arg-form">#}
{#                            <label class="col-sm-2 control-label">参数[<span class="red-fonts args-num">1</span>]</label>#}
{#                            <div class="col-sm-5 args-outer">#}
{#                                <input type="text" name="input[]" class="col-sm-5 form-group form-control args">#}
{#                            </div>#}
{#                            <div class="col-sm-2 add-items-outer">#}
{#                                <button type="button" id="add-items" class="form-group btn btn-hover btn-info" ng-click="addInput()" ng-disabled="storing"><i class="glyphicon glyphicon-plus"></i>#}
{#                                </button>#}
{#                            </div>#}
{#                        </div>#}
                  </form>

                    {% if log %}
                        <div class="alert alert-success text-center">{{ log }}</div>
                    {% endif %}
                  <div align="center">
                      <button type="submit" class="btn btn-success dim"  form="ScriptForm" formmethod="post" formaction="{% url 'exec_script_process' %}?project={{project}}">执行脚本</button>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
  function check_script(){
    var test = $('input[name="script_type"]:checked').val();
    if (test=="undefined"||test==null){
        alert("请选择脚本类型!");
        return false;
    }
  }
{#    $("#add-items").click(function () {#}
{#        var html = '<div class="form-group arg-form">' + $(".arg-form:last").html() + '</div>';#}
{#        var num  = parseInt($(".args-num:last").text());#}
{#        $(".arg-form:last").after(html);#}
{#        $(".args:last").attr({"name":"input[]"});#}
{#        $(".args-num:last").empty().text(num+1);#}
{#        if($(".add-items-outer").length == 1)#}
{#                return;#}
{#        $(".add-items-outer:last").remove();#}
{#    });#}

    $('#check_args').change(function () {
        var scriptName = $(this).val();

        if(scriptName.length >=0){
          $.ajax({
              type: "POST",
              url : "{% url 'script_args_api' %}",
              data:{sname:scriptName},
              dataType:"json",
              success:function (res) {

                  //{status:true,msg:"del success"}
                  if(res.status == '1'){
                      //args_dict: {"arg0": "platfrom", "arg1": "action"}
                      addInputHtml(res.args_dict);
                      console.log(res.args_dict)

                  }else{
                      console.log(res.msg);
                  }
              }
          });
      }
  });

    function addInputHtml(args_dict) {
        $('.input-args:first').empty().siblings('.input-args').remove();
        num = false;
        for(var arg in args_dict){
            var html='<label class="col-sm-2 control-label"> '+ args_dict[arg] +' <span class="green-fonts"> </span>: </label> \
                <div class="col-sm-5"><input type="text" name="input[]" class="form-control args">\
                </div>';
            if(num == false){
                $('.input-args').append(html);
                num=true;
            }else{
                $('.input-args:last').after('<div class="form-group input-args">' + html + '</div>');
            }

        }
    }

</script>

{% endblock %}